import React from 'react';
import './horizontal_5.css';
/*import   {fun1} from  './horizontal.js';*/


class Horizontal_5 extends React.Component{
    constructor(props){
        super(props);
        this.state={
            eid:props.eid,
            maxCHegiht:'0',
            maxTHeight:'0'
        }
        this.rdCss=this.rdCss.bind(this);
        this.updateData=this.updateData.bind(this);
    }
    componentDidMount(){
        const {datainfo}=this.props;
        const {eid}=this.state;
        this.updateData();
    }

    rdCss() {
        var obj = arguments[0];
        var options = arguments[1];
        if (!!obj === false || typeof options === 'undefined') {
            return null;
        }
        if (typeof options === 'string') {
            let res = document.defaultView.getComputedStyle(obj, null)[options];
            res = Number(res.replace('px', ''));
            return res;
        }
        if (typeof options === 'object') {
            for (var i in options) {
                obj.style[i] = options[i];
            }
        }
    }

    updateData(){
        const {datainfo}=this.props;
        const {eid}=this.state;
        if(datainfo!=null&&datainfo.length>0){

            let maxContentHegiht=0;
            let maxTimelineHeight=0;
            datainfo.map((item, i) => {
                let timelineDivClass=".timeline-horizontal-5 .timeline_"+eid+"_"+i;
                let timelineDiv=document.querySelector(timelineDivClass);
                let timelineHeight=parseInt(Number(this.rdCss(timelineDiv, 'height')));
                if(parseInt(timelineHeight)>parseInt(maxTimelineHeight)){
                    maxTimelineHeight=timelineHeight;
                }
                let contentDivClass=".timeline-horizontal-5 .contentDiv_"+eid+"_"+i;
                let contentDiv=document.querySelector(contentDivClass);
                let contentHeight=parseInt(Number(this.rdCss(contentDiv, 'height')));
                if(parseInt(contentHeight)>parseInt(maxContentHegiht)){
                    maxContentHegiht=contentHeight;
                }
            })
            this.setState({maxTHeight:maxTimelineHeight,maxCHeight:maxContentHegiht});

        }
    }

    render(){
        const {datainfo}=this.props;
        const {eid,maxCHeight,maxTHeight}=this.state;

        let bStyle={width:'20px',height:'20px',position:'absolute',top:'0',right:'0',left:'-6px'};
        let rightStyle={width:'0',height:'0',display:'block',position:'absolute',top:'0',borderTop:'10px transparent dashed',borderRight:'10px transparent dashed',borderBottom:'10px transparent dashed',borderLeft:'20px solid #adadad'};
        let leftStyle={width:'0',height:'0',display:'block',position:'absolute',top:'0',borderTop:'10px transparent dashed',borderRight:'10px transparent dashed',borderBottom:'10px transparent dashed',borderLeft:'10px solid white'};

        let topHeight=parseInt(maxTHeight)+60;
        if(topHeight<80){
            topHeight=80;
        }
        let eventsWidth=0;
        let style
        if(datainfo!=null&&datainfo.length>0){
            let timelinedata=".timeline-data-"+eid;
            eventsWidth=(datainfo.length)*200+50;
            style={width:'20px',height:'20px',left:eventsWidth,top:'-10px'};
        }
        let maxHeight=parseInt(topHeight)+parseInt(maxCHeight)+50;

        return<div className="timeline-horizontal-5 ">
                { datainfo!=null&&datainfo.length>0?
                    <div className="timeline" style={{height:maxHeight}}>
                        <div className={"timeline-data timeline-data-"+eid}>
                            <div className="horizontal_5" style={{width:eventsWidth,top:topHeight}}>
                                <ol>
                                {
                                    datainfo.map((item,i)=>{
                                    const leftWidth=200*(i)+50;
                                    let contentdata=item.content;
                                    let contentArr=contentdata.split(/\n/g);
                                    return <li>
                                                <a href="#0" style={{left:leftWidth}}  className={"num_"+i%4+" timeline_"+eid+"_"+i}  data-date={item.timeline} >
                                                    <span className="dateSpan" style={{wordBreak:'break-all'}}>{item.timeline}</span>
                                                </a>
                                                <div className={"contentDiv contentDiv_"+eid+"_"+i} style={{left:leftWidth,wordBreak:'break-all'}}>
                                                    {
                                                        contentArr.map((item,i)=>{
                                                            if(item==""){
                                                                return <span style={{display:'block',height:'20px'}}></span>
                                                            }
                                                            return <span style={{paddingLeft:'6px',paddingRight:'6px',display:'block'}}>{item}</span>
                                                        })
                                                    }
                                                </div>
                                            </li>
                                    })
                                }
                                </ol>
                                <div style={style}>
                                    <b className="right" ><i className="right-arrow1" ></i><i className="right-arrow2" ></i></b>
                                </div>
                            </div>
                        </div>
                </div>
                :
                <div style={{textAlign:'center'}}><img src="/spa/portal/images/timelinestyle/nodata.png" /></div>
                }
            </div>

        }

}

export default Horizontal_5;